<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传奇 H5 游戏</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="game-container">
        <!-- 游戏画布 -->
        <canvas id="gameCanvas" width="1600" height="900"></canvas>
        
        <!-- 游戏UI覆盖层 -->
        <div class="game-ui">
            <!-- 顶部状态栏 -->
            <div class="top-bar">
                <div class="game-title">传奇 H5</div>
                <div class="player-info">
                    <span class="player-name">勇者</span>
                    <span class="player-level">Lv.1</span>
                </div>
            </div>
            
            <!-- 左侧状态面板 -->
            <div class="left-panel">
                <!-- 生命值条 -->
                <div class="stat-bar">
                    <div class="stat-label">❤️ 生命值</div>
                    <div class="stat-container">
                        <div id="health-bar" class="stat-fill health-fill"></div>
                        <div class="stat-text" id="health-text">100/100</div>
                    </div>
                </div>
                
                <!-- 经验值条 -->
                <div class="stat-bar">
                    <div class="stat-label">⭐ 经验值</div>
                    <div class="stat-container">
                        <div id="exp-bar" class="stat-fill exp-fill"></div>
                        <div class="stat-text" id="exp-text">0/100</div>
                    </div>
                </div>
                
                <!-- 魔法值条 -->
                <div class="stat-bar">
                    <div class="stat-label">🔮 魔法值</div>
                    <div class="stat-container">
                        <div id="mana-bar" class="stat-fill mana-fill"></div>
                        <div class="stat-text" id="mana-text">100/100</div>
                    </div>
                </div>
                
                <!-- 属性面板 -->
                <div class="attributes-panel">
                    <div class="attribute-item">
                        <span class="attr-icon">⚔️</span>
                        <span class="attr-label">攻击力:</span>
                        <span class="attr-value" id="damage-value">10</span>
                    </div>
                    <div class="attribute-item">
                        <span class="attr-icon">🛡️</span>
                        <span class="attr-label">防御力:</span>
                        <span class="attr-value" id="defense-value">5</span>
                    </div>
                    <div class="attribute-item">
                        <span class="attr-icon">💨</span>
                        <span class="attr-label">移动速度:</span>
                        <span class="attr-value" id="speed-value">3</span>
                    </div>
                </div>
            </div>
            
            <!-- 右侧控制面板 -->
            <div class="right-panel">
                <!-- 主要功能按钮 -->
                <div class="main-buttons">
                    <button id="character-button" class="game-button character-btn" title="角色界面">
                        <span class="btn-icon">👤</span>
                        <span class="btn-text">角色</span>
                    </button>
                    <button id="inventory-button" class="game-button inventory-btn" title="背包">
                        <span class="btn-icon">🎒</span>
                        <span class="btn-text">背包</span>
                    </button>
                    <button id="skills-button" class="game-button skills-btn" title="技能">
                        <span class="btn-icon">🔮</span>
                        <span class="btn-text">技能</span>
                    </button>
                    <button id="map-button" class="game-button map-btn" title="地图">
                        <span class="btn-icon">🗺️</span>
                        <span class="btn-text">地图</span>
                    </button>
                </div>
                
                <!-- 快捷操作按钮 -->
                <div class="quick-actions">
                    <button id="auto-potion-btn" class="quick-btn" title="自动吃药">
                        <span class="btn-icon">💊</span>
                    </button>
                    <button id="auto-equip-btn" class="quick-btn" title="自动装备">
                        <span class="btn-icon">⚡</span>
                    </button>
                    <button id="settings-btn" class="quick-btn" title="设置">
                        <span class="btn-icon">⚙️</span>
                    </button>
                </div>
            </div>
            
            <!-- 地图信息栏 -->
            <div class="map-info-bar">
                <div class="map-info" id="map-info">
                    <div class="map-name">新手森林</div>
                    <div class="map-level">推荐等级: 1</div>
                    <div class="map-description">适合新手冒险者的安全森林</div>
                </div>
            </div>
            
            <!-- 底部信息栏 -->
            <div class="bottom-bar">
                <div class="game-stats">
                    <span class="stat-item">怪物: <span id="monster-count">0</span></span>
                    <span class="stat-item">物品: <span id="item-count">0</span></span>
                    <span class="stat-item">FPS: <span id="fps-counter">60</span></span>
                </div>
                <div class="controls-info">
                    <span>WASD移动 | I背包 | C角色 | S技能 | M地图 | 1火球术 | 2治疗术 | 3闪电术 | ESC关闭</span>
                </div>
            </div>
        </div>
        
        <!-- 背包面板 -->
        <div id="inventory-panel" class="hidden">
            <div class="inventory-header">
                <h2>🎒 背包</h2>
                <button class="close-btn" id="inventory-close-btn">×</button>
            </div>
            <div id="inventory-slots"></div>
        </div>
        
        <!-- 技能面板 -->
        <div id="skills-panel" class="hidden">
            <div class="skills-header">
                <h2>🔮 技能面板</h2>
                <button class="close-btn" id="skills-close-btn">×</button>
            </div>
            <div class="skills-content">
                <!-- 技能列表 -->
                <div class="skills-list">
                    <h3>⚔️ 攻击技能</h3>
                    <div class="skill-item" data-skill="fireball">
                        <div class="skill-icon">🔥</div>
                        <div class="skill-info">
                            <div class="skill-name">火球术</div>
                            <div class="skill-desc">发射火球攻击敌人</div>
                            <div class="skill-stats">
                                <span class="skill-damage">伤害: 25</span>
                                <span class="skill-mana">魔法: 20</span>
                                <span class="skill-cooldown">冷却: 60帧</span>
                            </div>
                        </div>
                        <div class="skill-hotkey">1</div>
                    </div>
                    <div class="skill-item" data-skill="lightning">
                        <div class="skill-icon">⚡</div>
                        <div class="skill-info">
                            <div class="skill-name">闪电术</div>
                            <div class="skill-desc">召唤闪电攻击敌人</div>
                            <div class="skill-stats">
                                <span class="skill-damage">伤害: 35</span>
                                <span class="skill-mana">魔法: 25</span>
                                <span class="skill-cooldown">冷却: 90帧</span>
                            </div>
                        </div>
                        <div class="skill-hotkey">3</div>
                    </div>
                </div>
                
                <div class="skills-list">
                    <h3>💚 辅助技能</h3>
                    <div class="skill-item" data-skill="heal">
                        <div class="skill-icon">💚</div>
                        <div class="skill-info">
                            <div class="skill-name">治疗术</div>
                            <div class="skill-desc">恢复自身生命值</div>
                            <div class="skill-stats">
                                <span class="skill-healing">治疗: 30</span>
                                <span class="skill-mana">魔法: 15</span>
                                <span class="skill-cooldown">冷却: 120帧</span>
                            </div>
                        </div>
                        <div class="skill-hotkey">2</div>
                    </div>
                </div>
                
                <!-- 技能说明 -->
                <div class="skills-help">
                    <h3>📖 技能使用说明</h3>
                    <ul>
                        <li><strong>快捷键:</strong> 按1、2、3键快速使用技能</li>
                        <li><strong>魔法消耗:</strong> 使用技能需要消耗魔法值</li>
                        <li><strong>冷却时间:</strong> 技能使用后有冷却时间</li>
                        <li><strong>自动瞄准:</strong> 攻击技能会自动瞄准最近的敌人</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 地图面板 -->
        <div id="map-panel" class="hidden">
            <div class="map-header">
                <h2>🗺️ 地图选择</h2>
                <button class="close-btn" id="map-close-btn">×</button>
            </div>
            <div class="map-content">
                <!-- 当前地图信息 -->
                <div class="current-map-info">
                    <h3>📍 当前地图</h3>
                    <div class="current-map-card" id="current-map-card">
                        <div class="map-name">新手森林</div>
                        <div class="map-level">推荐等级: 1</div>
                        <div class="map-description">适合新手冒险者的安全森林</div>
                    </div>
                </div>
                
                <!-- 可访问地图列表 -->
                <div class="available-maps">
                    <h3>🌍 可访问地图</h3>
                    <div class="maps-list" id="maps-list">
                        <!-- 地图列表将通过JavaScript动态生成 -->
                    </div>
                </div>
                
                <!-- 地图说明 -->
                <div class="map-help">
                    <h3>📖 地图说明</h3>
                    <ul>
                        <li><strong>传送门:</strong> 在地图上寻找紫色圆形传送门</li>
                        <li><strong>等级限制:</strong> 只能进入推荐等级-1以上的地图</li>
                        <li><strong>怪物等级:</strong> 不同地图的怪物等级和难度不同</li>
                        <li><strong>传送方式:</strong> 移动到传送门附近自动触发传送</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 角色界面面板 -->
        <div id="character-panel" class="hidden">
            <div class="character-header">
                <h2>👤 角色信息</h2>
                <button class="close-btn" id="character-close-btn">×</button>
            </div>
            <div class="character-content">
                <!-- 角色基本信息 -->
                <div class="character-basic">
                    <div class="character-avatar">
                        <div class="avatar-placeholder">👤</div>
                        <div class="character-level">Lv.<span id="char-level">1</span></div>
                    </div>
                    <div class="character-details">
                        <h3 id="char-name">勇者</h3>
                        <div class="char-stats">
                            <div class="char-stat">
                                <span class="stat-icon">❤️</span>
                                <span class="stat-label">生命值:</span>
                                <span class="stat-value" id="char-health">100/100</span>
                            </div>
                            <div class="char-stat">
                                <span class="stat-icon">⭐</span>
                                <span class="stat-label">经验值:</span>
                                <span class="stat-value" id="char-exp">0/100</span>
                            </div>
                            <div class="char-stat">
                                <span class="stat-icon">🔮</span>
                                <span class="stat-label">魔法值:</span>
                                <span class="stat-value" id="char-mana">100/100</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 装备槽位 -->
                <div class="equipment-slots">
                    <h3>⚔️ 装备</h3>
                    <div class="equipment-grid">
                        <div class="equip-slot" data-slot="weapon">
                            <div class="slot-label">武器</div>
                            <div class="slot-content" id="weapon-slot">-</div>
                        </div>
                        <div class="equip-slot" data-slot="chest">
                            <div class="slot-label">护甲</div>
                            <div class="slot-content" id="chest-slot">-</div>
                        </div>
                        <div class="equip-slot" data-slot="ring1">
                            <div class="slot-label">戒指1</div>
                            <div class="slot-content" id="ring1-slot">-</div>
                        </div>
                        <div class="equip-slot" data-slot="ring2">
                            <div class="slot-label">戒指2</div>
                            <div class="slot-content" id="ring2-slot">-</div>
                        </div>
                    </div>
                </div>
                
                <!-- 详细属性 -->
                <div class="character-attributes">
                    <h3>📊 属性详情</h3>
                    <div class="attributes-grid">
                        <div class="attr-row">
                            <span class="attr-name">⚔️ 攻击力:</span>
                            <span class="attr-value" id="char-damage">10</span>
                            <span class="attr-bonus" id="char-damage-bonus">+0</span>
                        </div>
                        <div class="attr-row">
                            <span class="attr-name">🛡️ 防御力:</span>
                            <span class="attr-value" id="char-defense">5</span>
                            <span class="attr-bonus" id="char-defense-bonus">+0</span>
                        </div>
                        <div class="attr-row">
                            <span class="attr-name">❤️ 生命值:</span>
                            <span class="attr-value" id="char-max-health">100</span>
                            <span class="attr-bonus" id="char-max-health-bonus">+0</span>
                        </div>
                        <div class="attr-row">
                            <span class="attr-name">💨 移动速度:</span>
                            <span class="attr-value" id="char-speed">3</span>
                            <span class="attr-bonus" id="char-speed-bonus">+0</span>
                        </div>
                        <div class="attr-row">
                            <span class="attr-name">🔮 魔法值:</span>
                            <span class="attr-value" id="char-max-mana">100</span>
                            <span class="attr-bonus" id="char-max-mana-bonus">+0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 游戏说明 -->
        <div class="game-instructions">
            <strong>游戏说明:</strong><br>
            WASD 或方向键移动<br>
            接触怪物自动战斗<br>
            自动装备更好物品<br>
            C键或点击角色按钮查看角色<br>
            I键或点击背包按钮查看物品<br>
            S键或点击技能按钮查看技能<br>
            ESC键或点击外部关闭面板
        </div>
    </div>

    <!-- 游戏配置文件 -->
    <script src="game-config.js"></script>
    
    <!-- 地图管理器 (保持兼容性) -->
    <script src="js/map-manager.js"></script>
    
    <!-- 优化后的模块化游戏系统 -->
    <script type="module" src="js/main.js"></script>
</body>
</html>


